<!-- src/components/CommentModal.vue -->
<template>
  <div v-if="visible" class="modal-mask">
    <div class="modal-container">
      <!-- 弹窗头部 -->
      <div class="modal-header">
        <h2>事件评论</h2>
        <div class="sort-controls">
          <button :class="{ active: sortType === 'time' }" @click="sortType = 'time'">
            时间
          </button>
          <button :class="{ active: sortType === 'random' }" @click="sortType = 'random'">
            随机
          </button>
        </div>
      </div>

      <!-- 评论表格 -->
      <div class="comment-table">
        <table>
          <thead>
            <tr>
              <th>用户</th>
              <th>评论内容</th>
              <th>情感强度</th>
              <th>情感分类</th>
              <th>点赞数</th>
              <th>时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-if="sortedComments.length === 0" class="empty-row"><td></td><td></td><td></td><td>空</td><td></td><td></td></tr >
            <tr v-for="comment in sortedComments" :key="comment.id">
              <td>{{ comment.user }}</td>
              <td class="comment-content">{{ comment.content }}</td>
              <td :class="sentimentClass(comment.sentiment)">
                {{ comment.intensity.toFixed(2) }}
              </td>
              <td>
                <span :class="sentimentTagClass(comment.sentiment)">
                  {{ comment.sentiment }}
                </span>
              </td>
              <td>{{ comment.like }}</td>
              <td>{{ formatDate(comment.time) }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 底部按钮 -->
      <div class="modal-footer">
        <button class="back-btn" @click="close">返回</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  visible: Boolean,
  comments: {
    type: Array,
    default: () => [
      // 示例数据
      {
        id: 1,
        user: '用户A',
        content: '这个事件真的很有意义！',
        intensity: 0.9,
        sentiment: '积极',
        likes: 50,
        time: '2024/03/02 11:21'
      },
      // 其他示例数据...
    ]
  }
})

const emit = defineEmits(['close'])
const sortType = ref('time')

// 排序逻辑
const sortedComments = computed(() => {
  if (sortType.value === 'time') {
    return [...props.comments].sort((a, b) =>
      new Date(b.time) - new Date(a.time)
    )
  }
  return [...props.comments].sort(() => Math.random() - 0.5)
})

// 样式处理
const sentimentClass = (sentiment) => {
  return {
    'sentiment-intensity': true,
    positive: sentiment === '积极',
    neutral: sentiment === '中性',
    negative: sentiment === '消极'
  }
}

const sentimentTagClass = (sentiment) => ({
  'sentiment-tag': true,
  'tag-positive': sentiment === '积极',
  'tag-neutral': sentiment === '中性',
  'tag-negative': sentiment === '消极'
})

const formatDate = (dateStr) => {
  return dateStr.replace(/\//g, '-') // 简单格式化示例
}

const close = () => emit('close')
</script>

<style scoped>
.modal-mask {
  /* 复用之前的遮罩样式 */
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-container {
  width: 90%;
  max-width: 1200px;
  background: #1b263b;
  border-radius: 8px;
  padding: 24px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.empty-row{
  text-align: center;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.sort-controls button {
  padding: 6px 12px;
  margin-left: 10px;
  border: 1px solid #ffffff;
  border-radius: 4px;
  cursor: pointer;
}

.sort-controls button.active {
  background: #1890ff;
  color: rgb(255, 255, 255);
  border-color: #1890ff;
}

.comment-table {
  flex: 1;
  overflow-y: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,td {
  
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ffffff;
}

th {
  background: #1b263b;
}

.comment-content {
  max-width: 400px;
}

.sentiment-intensity {
  font-weight: bold;
}

.sentiment-intensity.positive {
  color: #389e0d;
}

.sentiment-intensity.neutral {
  color: #d48806;
}

.sentiment-intensity.negative {
  color: #cf1322;
}

.sentiment-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.9em;
}

.tag-positive {
  background: #4fe278;
}

.tag-neutral {
  background: #e9cf4b;
}

.tag-negative {
  background: #f5483c;
}

.back-btn {
  padding: 8px 24px;
  background: #1890ff;
  color: rgb(255, 255, 255);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>